<template>
	<uni-popup ref="popup" type="bottom" :safe-area="false" v-if="detail">
		<view class="order-options-wrapper" :style="{'--maxheight':maxHeight+'px'}">
			<!-- 商品详情 -->
			<view class="goods-detail-wrapper">
				<view class="goods-cover-wrapper">
					<image :src="detail.product_images" mode="aspectFill" class="goods-cover" />
				</view>
				<view class="goods-info-wrapper">
					<view class="goods-name">
						{{detail.name}}
					</view>
					<view class="goods-price">
						￥{{totalPrice}}
					</view>
				</view>
			</view>
			<!-- 规格 -->
			<!-- 		<view class="goods-option-container">
				<view class="option-title">
					规格
				</view>
				<view class="options-list">
					<view class="options-item" v-for="item,index in 5" :class="{'current':current_type===index}">
						POS2154-563
					</view>
				</view>
			</view> -->
			<!-- 颜色 -->
			<!-- 		<view class="goods-option-container">
				<view class="option-title">
					颜色
				</view>
				<view class="options-list">
					<view class="options-item" v-for="item,index in colorList"
						:class="{'current':current_color===index}">
						{{item}}
					</view>
				</view>
			</view> -->
			<!-- 单个颜色数量 -->
			<!-- v-if="current_order_type===ORDER_TYPE.USER" -->
			<view class="goods-option-container">
				<view class="option-title">
					数量
					<view class="option-single-count-wrapper">
						<uni-number-box :min="min" v-model="count" @change="change" />
					</view>
				</view>
			</view>
			<!-- 多个颜色数量 -->
			<!-- 		<view class="goods-option-container" v-else>
				<view class="option-title">
					数量
				</view>
				<view class="goods-group-count-wrapper">
					<view class="row-item header">
						<text>颜色</text>
						<text>价格</text>
						<text>数量</text>
					</view>
					<view class="row-item" v-for="item,index in colorList" :key="index">
						<view class="color">{{item}}</view>
						<view class="price">￥20.00</view>
						<view class="count">
							<uni-number-box :min="1" />
						</view>
					</view>
				</view>
			</view> -->
			<!-- 按钮 -->
			<view class="btn-wrapper">
				<g-button :btn_text="current_order_type===ORDER_TYPE.USER?'立即购买':'代理购买'" :width="638" :height="88"
					:borderRadius="24" @click="jump" />
			</view>
		</view>
	</uni-popup>
</template>


<script lang="ts">
	export default {
		name: 'navbar',
		options: {
			styleIsolation: 'shared'
		},
	}
</script>

<script lang="ts" setup>
	import { ref, Ref, onMounted, defineProps, defineExpose, computed, toRefs } from 'vue';
	import { ORDER_TYPE } from '@/enum/goods';
	import { IGoodsOrderPopupExpose } from './types';
	import REST_URL from '@/http/http.restUrl';
	import { useStore } from 'vuex';
	import { GET_STORE_USERINFO } from '@/store/gettersType';


	const store = useStore();

	interface IProps {
		detail : IGoods | null,
		agentMin : number,
	}

	const props = withDefaults(defineProps<IProps>(), {
		detail: null,
		agentMin: 10,
	})

	// const agentMin : Ref<number> = ref(10);

	const { agentMin } = toRefs(props);

	const userMin : Ref<number> = ref(1);


	onMounted(async () => {
		// const { data } = await uni.http.POST(REST_URL.getMinOrderCount, {
		// 	customer_id: store.getters[GET_STORE_USERINFO].id,
		// })
		// // console.log('booking_min_number',data.booking_min_number)
		// agentMin.value = data.booking_min_number;
	})

	const min = computed(() => {
		return Number(current_order_type.value == ORDER_TYPE.AGENT ? agentMin.value : userMin.value);
	})

	const maxHeight = computed(() => {
		return uni.getWindowInfo().windowHeight * 0.8;
	})

	const count : Ref<number> = ref(1);



	const change = (e : number) => {
	}


	const totalPrice = computed(() => {
		return count.value * Number(props.detail!.retail_price)
	})





	// const current_type : Ref<number> = ref(0);

	// const current_color : Ref<number> = ref(0);

	// const colorList : string[] = ['红色', '黄色'];


	const popup : Ref<any> = ref(null);

	const current_order_type : Ref<ORDER_TYPE> = ref(ORDER_TYPE.AGENT);

	const open = (type : ORDER_TYPE) => {
		current_order_type.value = type;
		count.value = current_order_type.value == ORDER_TYPE.AGENT ? agentMin.value : userMin.value;
		popup.value.open();
	}

	interface IOrderParams {
		id : number,
		count : number,
		type : ORDER_TYPE,
	}

	const jump = () => {
		const params : IOrderParams = {
			id: props.detail!.id,
			count: count.value,
			type: current_order_type.value,
		}

		uni.router.route({
			url: "/pages_mall/confirm_order/confirmOrder",
			params,
		})
	}

	defineExpose<IGoodsOrderPopupExpose>({
		open,
	})
</script>

<style scoped lang="scss">
	@import "./goodsOrderPopup.scss";
</style>